<script setup lang="ts">
const props = defineProps<{
  size?: number;
  current?: number;
  total?: number;
  loading?: boolean;
}>();
const emits = defineEmits<{
  load: [];
}>();

const progress = computed(() => props.total ? (props.current ?? 0) / props.total * 100 : 0);
</script>

<template>
  <div class="mx-auto mt-6 w-34 flex flex-col items-center text-sm">
    <button
      class="w-fit cursor-pointer rounded-1 border-none bg-sys-layer-e px-4 py-1 font-400 lh-relaxed"
      :class="{ 'hover:bg-slate': !props.loading, 'cursor-wait': props.loading }"
      @click="emits('load')"
    >
      {{ $t('mdXrwOTtIgL4qIeuLMyD') }}
    </button>
    <div
      class="my-3 h-1 w-full rounded-full"
      :style="`background: linear-gradient(to right,#B91B1B ${progress}%, #3E404C ${progress}%);`"
    />
    <div v-if="props.total" class="text-sys-text-body lh-none">
      {{ props.current ?? 0 }} / {{ props.total }}
    </div>
  </div>
</template>
